<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
    <head>
        <title>当日录单成交量排行榜</title>
        <link rel="stylesheet" href="//unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
        <script src="//unpkg.com/vue/dist/vue.js"></script>
        <script src="//unpkg.com/element-ui@2.13.0/lib/index.js"></script>
        <link rel="stylesheet" href="../layui/css/layui.css">
        <script src="../layui/layui.js"></script>
        <script src="../js/jquery-3.4.1.min.js"></script>
        <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
        <script src="../bootstrap/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="/fonts/fontStyle.css">
        <style type="text/css">
            /* 去除el-table底部的滚动条 */
            .el-table__body-wrapper::-webkit-scrollbar {
                width: 0px;
                height: 0px;
            }
            body {
                color: #909399;
                font-size: 14px;
            }
            h1 {
                color: #000;
                font-size: 24px;
                font-family: PingFangSC-Regular;
                text-align: center;
            }
            .el-table {
                width: 600px;
                margin: 20px auto;
                color: #000000;
                font-size: 17px;
                font-family: PingFangSC-Regular;
            }
            .el-table th .cell {
                color: #000;
                font-size: 17px;
                font-weight: normal;

            }
            .el-table td .cell div {
                color: #000000 !important;
                font-size: 17px !important;
            }
            .columns {
                font-size: 14px;
            }
        </style>
    </head>
    <body>
        <h1>当日录单成交量排行榜</h1>
        <div id="app">
            <template>
                <el-table :data="tableData" border>
                    <el-table-column prop="id" label="排名" width="100" class-name="columns">
                        <template slot-scope="scope">
                            <div v-html="scope.row.id" style="color: #909399; font-size: 14px;"></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="char05" label="姓名" width="250" class-name="columns">
                        <template slot-scope="scope">
                            <div v-html="scope.row.char05" style="color: #909399; font-size: 14px;"></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="num" label="成交量" width="150" class-name="columns">
                        <template slot-scope="scope">
                            <div v-html="scope.row.num" style="color: #909399; font-size: 14px;"></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="numa" label="总量" width="100" class-name="columns">
                        <template slot-scope="scope">
                            <div v-html="scope.row.numa" style="color: #909399; font-size: 14px;"></div>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </div>
        <script>
            $.ajax({
                type: "post",
                url: "listTodayRecordData",
                success: function(data) {
                    var Main = {
                        data() {
                            return {
                                tableData: data
                            }
                        }
                    }
                    var Ctor = Vue.extend(Main)
                    new Ctor().$mount('#app')
                }
            });
        </script>
    </body>
</html>
